<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    default-active="2"
    text-color="#fff"
    :collapse="isCollapse"
    router
  >
    <!-- 没有二级菜单的项 -->
    <el-menu-item index="/home">
      <el-icon><icon-menu /></el-icon>
      <span class="hometitle">首页</span>
    </el-menu-item>
    <!-- 有二级菜单的项 -->
    <el-sub-menu
      :index="`/home/${item.path}`"
      v-for="item in userinfo.checkedkeys"
      :key="item.path"
    >
      <template #title>
        <el-icon><location /></el-icon>
        <span>{{ item.label }}</span>
      </template>
      <el-menu-item
        :index="`/home/${item.path}/${child.path}`"
        v-for="child in item.children"
        :key="child.path"
      >
        <el-icon><icon-menu /></el-icon>
        <span>{{ child.label }}</span>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script>
import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue'
// 获取菜单栏数据从store 仓库中的获取
import { mapState } from 'vuex'
export default {
  name: '',
  data() {
    return {
      logourl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      // isCollapse: false // boolean值为true 表示折叠, 否则打开  控制左侧菜单栏是否折叠
    }
  },
  props: ['isCollapse'],
  computed: {
    ...mapState(['userinfo'])
  },
  created() {},
  methods: {
    handleOpen(key, keyPath) {},
    handleClose(key, keyPath) {}
  },
  mounted() {
    // console.log('userinfo', this.userinfo)
  },
  components: {
    Location,
    Setting,
    Document,
    IconMenu
  }
}
</script>
<style lang='scss' scoped>
.el-menu {
  width: 100%;
  flex: 1;
}
.logobox {
  width: 100%;
  display: flex;
  align-items: center;
}
.el-menu {
  border-right: none;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>